<!--
 * @Author: xiaotiwen
 * @Date: 2020-05-08 18:14:48
 * @LastEditTime: 2020-07-22 16:45:03
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\fundingManagement\fundingManagementDetails.vue
 * @Description: 经费管理详情
 -->

<template>
    <div>
        <div class="funding">
            <div v-if="type === 'print'" class="funding_print">
                <h2>{{$t('fundingManagement.title.detailPageTitle')}}</h2>
                <el-button type="primary" @click="print">{{$t('fundingManagement.btn.print')}}</el-button>
            </div>
            <div v-else-if="type === 'details'" class="funding_print">
                <h2>{{$t('fundingManagement.title.detailPageTitle2')}}</h2>
            </div>
            <h2 v-else>{{$t('fundingManagement.title.pageTitle2')}}</h2>
            <div ref="print">
                <!--startprint-->
                <wordTable :data="data" :label="label" :left-style="leftStyle" :dataInfo="dataInfo"/>
                <div class="funding_border" />
                <div class="funding_borderForm">
                    <el-form ref="form" :model="form" label-width="130px">
                        <el-row class="funding_row">
                            <el-col :span="8" class="funding_col">
                                <div class="funding_col_div1 funding_bg"><span>{{$t('fundingManagement.label.project')}}</span></div>
                                <div class="funding_col_div funding_bg funding_center">{{$t('fundingManagement.label.money')}}</div>
                            </el-col>
                            <el-col :span="16" class="funding_col">
                                <div class="funding_col_div funding_bg funding_center">{{$t('fundingManagement.label.cal')}}</div>
                            </el-col>
                        </el-row>
                        <el-row v-for="(item,idx) in form.udgPtClassFundsInfoDetailTs" :key="idx" class="funding_row">
                            <el-col :span="8" class="funding_col">
                                <div class="funding_col_div1 funding_bg"> <span>{{ item.itemName }}：</span> </div>
                                <div class="funding_col_div">
                                    {{ item.itemValue }}
                                </div>
                            </el-col>
                            <el-col :span="16" class="funding_col">
                                <div class="funding_col_div">
                                    {{ item.itemDesc }}
                                </div>
                            </el-col>
                        </el-row>
                        <el-row class="funding_row">
                            <el-col :span="8" class="funding_col">
                                <div class="funding_col_div1 funding_bg"> <span>{{$t('fundingManagement.label.totalCount')}}</span> </div>
                                <div class="funding_col_he">
                                    <span class="funding_col_span">{{ form.totalFee }}</span>
                                </div>
                            </el-col>
                            <el-col :span="16" class="funding_col">
                                <el-col :span="6" class="funding_col">
                                    <div class="funding_bg funding_col_money">
                                        <span>{{$t('fundingManagement.label.actual')}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="18">
                                    <div class="funding_col_div">
                                        {{ form.writeFee }}
                                    </div>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-row v-if="type!=='details'" class="funding_row">
                            <el-col :span="12" class="funding_col">
                                <div class="funding_btleft">
                                    <el-row>
                                        <el-form-item :label="$t('fundingManagement.label.remark')">
                                            {{ form.remark }}
                                        </el-form-item>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('fundingManagement.label.personApply')" />
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('fundingManagement.label.date')" />
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                            <el-col :span="12" class="funding_col">
                                <div class="funding_btright">
                                    <el-row>
                                        <div class="funding_btright_div"> {{$t('fundingManagement.label.seal')}} </div>
                                        <el-form-item label-width="0">
                                            <el-input v-if="type==='audit'||pathKey=='audit'" v-model="form.content" type="textarea" :placeholder="$t('fundingManagement.tips.plzInput')" rows="4" resize="none" />
                                            <div v-else class="funding_view"><span>{{form.content}}</span></div>
                                        </el-form-item>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('fundingManagement.label.principal')" />
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item :label="$t('fundingManagement.label.date')" />
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <!--endprint-->
            </div>
        </div>
        <div class="funding_footer">
            <el-button v-if="type==='audit'||pathKey=='audit'" :disabled="fromCheckDetail" type="primary" class="funding_submit" @click="audit('pass')">{{$t('message.pass')}}</el-button>
            <el-button v-if="type==='audit'||pathKey=='audit'" :disabled="fromCheckDetail" type="danger" @click="audit('fail')">{{$t('message.reject')}}</el-button>
            <el-button @click="quit">{{$t('message.cancel')}}</el-button>
        </div>
    </div>
</template>

<script>
import wordTable from '../common/wordTable';
import { getDetails, exportPdf } from 'common/src/api/practiceManagement/fundingManagement';
import commonMixins from '../commonMixins';
import { approvalThrough, approvalReject } from 'common/src/api/approval';
export default {
    // 组件名称
    name: 'FundingManagementDetails',
    // 局部注册的组件
    components: {
        wordTable
    },
    mixins: [commonMixins],
    // 组件参数 接收来自父组件的数据
    props: {
        type: {
          type: String,
        },
        ids: {
            type: String,
            default: ''
        },
        fundId: {
            type: String,
            default: ''
        },
        dataInfo: {
          type: Object,
          default: {}
        },
        pathKey: {
            type: String,
            default: ''
        },
        fromCheckDetail:{
          type: Boolean,
          required: false
        },
    },
    // 组件状态值
    data() {
        return {
            leftStyle: { width: '140px' },
            form: {
                totalFee: '',
                remark: '',
                udgPtClassFundsInfoDetailTs: []
            },
            data: {},
            practiceNature: [
                { label: this.$t('fundingManagement.label.concentrated'), value: 'CENTRALIZE' },
                { label: this.$t('fundingManagement.label.dispersion'), value: 'DISPERSE' }
            ],
            options: {
                name: [],
                practiceCategory: [],
                baseArea: [],
                compus: []
            },
            label: [
                [{ label: this.$t('fundingManagement.label.courseProgramNumber'), props: 'subCourseNo' }, { label: this.$t('fundingManagement.label.courseName'), props: 'courseName' }, { label: this.$t('fundingManagement.label.courseOpenAcademy'), props: 'courseOpenAcademy' }],
                [{ label: this.$t('fundingManagement.label.majorName'), props: 'majorName' }, { label: this.$t('fundingManagement.label.practiceCategorys'), props: 'practiceCategorys' }, { label: this.$t('fundingManagement.label.baseAreas'), props: 'baseAreas' }],
                [{ label: this.$t('fundingManagement.label.studentCount'), props: 'studentCount' }, { label: this.$t('fundingManagement.label.teacherCount'), props: 'teacherCount' }, { label: this.$t('fundingManagement.label.practiceDays'), props: 'practiceDays' }]
            ]
        };
    },
    // 计算属性
    computed: {
        practiceChange() {
            return function (val) {
                let str = '';
                let obj = {};
                str.split('、').forEach(item => {
                    let arr = item.split('-');
                    this.$set(obj, arr[0], arr[1]);
                });
                return obj[val];
            };
        }
    },
    // 侦听器
    watch: {},
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    created() {
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    mounted() {
        if(this.dataInfo.no){
          this.data=this.dataInfo.content.udgPtClassFundDetailDto;
          this.form=this.dataInfo.content;
          this.form.workFlowId=this.dataInfo.no;
        }else{
          let jsons = {
            UDG_PRACTICE_CATEGORY: 'practiceCategory',
            UDG_FUND_CATEGORY: 'name',
            UDG_TRAINNING_POSITION: 'baseArea',
            X_XQ: 'compus'
          }
          this.initOptions(jsons).then(() => {
              this.getDetails();
          });
        }

    },
    // 组件方法
    methods: {
        quit() {
          if(this.dataInfo.wfType==135){
            this.$router.go(-1);
          }else{
            this.$emit('quit');
          }

        },
        print() { // 打印
            exportPdf({ fundId: this.fundId });
        },
        audit(val) {
            if (val === 'pass') {
                this.$eduConfirm(
                    this.$t('dispersionPracticeApply.tips.confirmPass'),
                    this.$t('common.btn.approve')
                ).then(() => {
                    let param = {
                        content: this.form.content?this.form.content:'同意申请',
                        no: this.form.workFlowId,
                        approveAttachment: [],
                        oaNo: this.form.workFlowId,
                        remark: null,
                        callbackEachTime: true
                    };
                    approvalThrough(param).then(res => {
                        if (res && res.code !== 200) {
                            this.$message({ message: res.msg, type: 'warning' });
                            return;
                        }
                        this.$message({ message: this.$t('dispersionPracticeApply.tips.confirmSuc'), type: 'success' });
                        this.$emit('quit', 'refresh');
                    });
                });
            } else if (val === 'fail') {
                this.$confirm(this.$t('dispersionPracticeApply.tips.areYouSureReject'), this.$t('common.btn.approve'),
                    {
                        confirmButtonText: this.$t('message.confirm'),
                        cancelButtonText: this.$t('message.cancel'),
                        type: 'warning'
                    }
                ).then(() => {
                    let param = {
                        content: this.form.content,
                        no: this.form.workFlowId,
                        approveAttachment: [],
                        oaNo: this.form.workFlowId,
                        remark: null
                    };
                    approvalReject(param).then(res => {
                        if (res && res.code !== 200) {
                            this.$message({ message: res.msg, type: 'warning' });
                            return;
                        }
                        this.$message({ message: this.$t('dispersionPracticeApply.tips.rejectSuc'), type: 'success' });
                        this.$emit('quit', 'refresh');
                    });
                });
            }
        },
        getDetails() { // 获取详情
            let jsonData = {
                classId: this.ids
            };
            this.options.name.sort(this.getSortFun('asc', 'value'));
            this.$nextTick(() => {
                getDetails(jsonData).then(res => {
                    this.data = res.data.udgPtClassFundDetailDto;
                    if (parseInt(this.data.baseArea) === 410001) {
                        this.$set(this.data, 'baseAreas', this.fieldChange(this.options.compus, this.data.compus));
                    } else {
                        this.$set(this.data, 'baseAreas', this.data.courseAddr);
                    }
                    this.$set(this.data, 'practiceCategorys', this.fieldChange(this.options.practiceCategory, this.data.practiceCategory));
                    this.doneData(res.data);
                });
            });
        },
        doneData(data) { // 详情返回处理
            this.form = {
                totalFee: data.totalFee,
                remark: data.remark,
                id: data.id,
                classId: data.classId,
                writeFee: data.writeFee,
                workFlowId: data.workFlowId,
                udgPtCourseInfoT: data.udgPtCourseInfoT,
                udgPtClassFundsInfoDetailTs: [],
                content: data.comment?data.comment:''
            };
            this.options.name.forEach(item => {
                let jsons = {};
                let flag = true;
                if (data.udgPtClassFundsInfoDetailTs && data.udgPtClassFundsInfoDetailTs.length > 0) {
                    data.udgPtClassFundsInfoDetailTs.forEach(item1 => {
                        if (item.value === item1.itemCode) {
                            jsons = {
                                id: item1.id,
                                fundId: item1.fundId,
                                itemName: item.label,
                                itemCode: item.value,
                                itemValue: item1.itemValue,
                                itemDesc: item1.itemDesc
                            };
                            flag = false;
                            return;
                        }
                        if (flag) {
                            jsons = {
                                itemName: item.label,
                                itemCode: item.value,
                                itemValue: '',
                                itemDesc: ''
                            };
                        }
                    });
                } else {
                    jsons = {
                        itemName: item.label,
                        itemCode: item.value,
                        itemValue: '',
                        itemDesc: ''
                    };
                }
                this.form.udgPtClassFundsInfoDetailTs.push(jsons);
            });
        },
    }
};
</script>
<style lang="scss" scoped>
$line: solid #828282 1px;
.funding {
    background-color: #fff;
    padding: 20px;
    &_border {
        height: 20px;
        width: 100%;
        border-right: $line;
        border-left: $line;
    }
    &_borderForm {
        border-bottom: $line;
    }
    &_bg {
        background-color: #f0f0f0;
    }
    &_center {
        text-align: center;
    }
    &_row {
        display: flex;
        align-items: stretch;
    }
    &_col {
        display: flex;
        align-items: stretch;
        &_div1 {
            width: 140px;
            padding: 5px 5px;
            border: $line;
            border-bottom: none;
            display: flex;
            align-items: center;
            span {
                flex: auto;
                text-align: right;
                line-height: 20px;
            }
        }
        &_div {
            flex: 5;
            padding: 5px 5px;
            border-right: $line;
            border-top: $line;
            line-height: 20px;
        }
        &_span {
            margin: auto;
        }
        &_he {
            display: flex;
            border-top: $line;
            border-right: $line;
            flex: auto;
        }
        &_money {
            display: flex;
            border: $line;
            border-bottom: none;
            border-left: none;
            flex: auto;
            align-items: center;
            span {
                text-align: right;
                flex: auto;
            }
        }
    }
    &_item {
        margin: 0;
    }
    &_btleft {
        border: $line;
        border-bottom: none;
        padding: 10px;
        flex: auto;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
    }
    &_btright {
        border: $line;
        border-left: none;
        border-bottom: none;
        flex: auto;
        padding: 10px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        &_div {
            margin-bottom: 10px;
            line-height: 32px;
        }
    }
    &_view {
        height: 100px;
        display: flex;
        align-items: center;
        span {
            margin: auto;
            color: black;
            font-size: 18px;
        }
    }
    &_footer {
        display: flex;
        flex-direction: row-reverse;
        padding: 20px;
        border-top: solid #ccc 1px;
        background-color: #fff;
        .funding_submit {
            margin-left: 10px;
        }
    }
    &_print {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15px;
        h2 {
            margin: 0;
        }
    }
}
</style>
